<!-- 自定义页面 -->
<template>
	<view class="home-wrap u-m-b-20 circle-page">
    <view class="rich-box"><u-parse :html="config.magisches"></u-parse></view>
    <view class="join_user" v-if="!is_login">
      <view class="join_tit">加入会员俱乐部 臻享120元礼券</view>
      <view class="join" @tap="joinUs">加入</view>
    </view>
		<shopro-tabbar></shopro-tabbar>
    <!-- 登录提示 -->
    <shopro-auth-modal :authType="authType" v-if="authType"></shopro-auth-modal>
    <!-- 悬浮按钮 -->
    <shopro-float-btn></shopro-float-btn>
	</view>
</template>

<script>
import shBanner from './components/sh-banner.vue';
import shGridSwiper from './components/sh-grid-swiper.vue';
import shHotGoods from './components/sh-hot-goods.vue';
import shAdv from './components/sh-adv.vue';
import shCoupon from './components/sh-coupon.vue';
import shSeckill from './components/sh-seckill.vue';
import shGroupon from './components/sh-groupon.vue';
import shRichtext from './components/sh-richtext.vue';
import shCell from './components/sh-cell.vue';
import shGrid from './components/sh-grid.vue';
import shTitleCard from './components/sh-title-card.vue';
import shOrderCard from './components/sh-order-card.vue';
import shWallet from './components/sh-wallet.vue';
import shSearch from './components/sh-search.vue';
import shCategoryTabs from './components/sh-category-tabs.vue';
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';

// #ifdef MP-WEIXIN
import { HAS_LIVE } from '@/env';
import shLive from './components/sh-live.vue';
// #endif

// #ifdef H5
let listenMove = document.body; //禁止手机h5下拉刷新带动整个页面。
let handle = function(e) {
	e.preventDefault();
};
// #endif

export default {
	components: {
		shBanner,
		shGridSwiper,
		shGroupon,
		shHotGoods,
		shAdv,
		shCoupon,
		shSeckill,
		shRichtext,
		shCell,
		shGrid,
		shTitleCard,
		shWallet,
		shOrderCard,
		shSearch,
		shCategoryTabs,

		// #ifdef MP-WEIXIN
		shLive
		// #endif
	},
	data() {
		return {
			// #ifdef MP-WEIXIN
			HAS_LIVE: HAS_LIVE,
			// #endif
			enable: false, //是否开启吸顶。
			isScorll: false,
			viewTemplate: [], //自定义模板数据
			isEmpty: false,
			isRefresh: false, //刷新,
      config: {},
      is_login: false,
      authType: ''
		};
	},
	computed: {
		...mapGetters(['isLogin','userInfo'])
	},
	onPullDownRefresh() {
	},
	onPageScroll(e) {
		this.isScorll = e.scrollTop > 100 ? true : false;
	},
	onShow() {
		let that = this;
		this.enable = true;
		this.isLogin && this.getCartList();
	},
	onHide() {
		this.enable = false;
	},
	onLoad(e) {
		let that = this;
    this.getConfig();
    if(this.$store.getters.isLogin){
      let mobile = this.$store.getters.userInfo.mobile;
      if(mobile){
        this.is_login = true;
      }
    }
	},
	methods: {
		...mapActions(['getCartList']),
		// 初始化
    getConfig(){
      let that = this;
      that.$http('common.getConfig', {
      }).then(res => {
        if (res.code === 1) {
          that.config=res.data;
        }
      });
    },
    joinUs(){
      console.log(this.$store.getters.isLogin)
      if(!this.$store.getters.isLogin){
        this.authType = 'accountLogin';
        this.$store.dispatch('showAuthModal', 'accountLogin');
      }else{
        let mobile = this.$store.getters.userInfo.mobile;
        if(mobile){

        }else{
          this.authType = 'bindMobile';
          this.$store.dispatch('showAuthModal', 'bindMobile');
        }
      }
    }
	}
};
</script>

<style lang="scss">
.circle-page{
  position: relative;
}
.join_user{
  background-color:#bebebe;
  padding: 10rpx 50rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40rpx;
  position: absolute;
  width: 100%;
  left: 0;
  top: 80rpx;
  .join_tit{
    color: #444;
  }
  .join{
    background-color:#444;
    color: #fff;
    padding: 10rpx 40rpx;
  }
}
// 富文本
.rich-box {
  /deep/ img {
    display: block;
  }
}
		
</style>
